// 浏览页 vue
const box1 = new Vue({
    el: '#box1',
    data: {
        // 搜索框的内容
        searchInfo: '',
        // 渲染项目的数据
        projMsg: [],
        // 当鼠标悬浮时用来识别id的属性
        activeId: -1,
        // 加载框对象
        load: null,
        // 数据总量
        dataSize: 0,
        // 当前页面
        currentPageIndex: 1,
        // 登录状态
        isLogin: false,
        // 用户数据
        users: [],
        // 当前登录的用户名
        loginUsername: ''
    },

    created() {
        this.checkIsLogin();
        this.getUsers();
    },
    methods: {
        // 检验是否登录
        checkIsLogin: function() {
            axios.get("/user/isLogin").then(response => {
                //获取json数据
                let resultInfo = response.data;

                console.log(resultInfo);

                //如果已经登录的话，改变已登录状态
                if (resultInfo.status === 1) {
                    this.isLogin = true;
                    this.loginUsername = resultInfo.data.username;
                }
            })
        },

        // 如果未登录 需要前往登录页面的代码,若登录的话
        toChat: function(toUser) {
            if (!this.isLogin) {
                layer.msg("请先登录", { time: 5000 });
            } else if (toUser === this.loginUsername) {
                layer.msg("不允许自己与自己聊天", { time: 5000 });
            }
            else {
                var url = "/chat.html?toUser=" + toUser;
                location.href = url;
            }
        },

        // 获取第一次用户数据
        getUsers: function() {
            axios.get('/search/user').then(res => {
                this.users = res.data.data;
            })
        },

        // 搜索
        search: function() {
            axios.get('/share/project/getProjectJson', {
                params: {
                    keyword: this.searchInfo,
                    currentPage: this.currentPageIndex
                }
            }).then(res => {
                if (res.data.status == '1') {
                    this.dataSize = res.data.data.dataSize;
                    // 暂时保存resultList
                    var resultList = res.data.data.resultList;
                    // 对返回来的数据做处理 将type修改为数组
                    for (var i = 0; i < resultList.length; i++) {
                        var r1 = resultList[i];
                        if (r1.type != null) {
                            var res = r1.type.replace('[', '');
                            res = res.replace(']', '');
                            res = res.replace(' ', '');
                            res = res.split(',');
                            resultList[i].type = res;
                        }
                    }
                    // 修改完之后赋值
                    this.projMsg = resultList;
                    //请求响应回来就进行关闭
                    layer.close(this.load);
                    //如果是首页就会重新调用
                    if (this.currentPageIndex === 1) {
                        this.pageData('search');
                    }
                }
            })
        },

        // 获取url地址并拿到请求参数的值
        // 封装函数 返回地址栏中的参数
        getUrlParam: function() {
            // 获取地址栏的东西 看看是要做什么事情
            var path = location.href;
            // 对path进行解析 用问号分隔
            var arr = path.split('?')[1];
            arr = arr.split('&');
            var map = {};
            for (var i = 0; i < arr.length; i++) {
                var keyAndVal = arr[i].split('=');
                //对中文字符进行解码,获取到中文字符
                keyAndVal[1] = decodeURIComponent(keyAndVal[1]);
                map[keyAndVal[0]] = keyAndVal[1];
            }
            return map;
        },

        // 鼠标悬浮聊天按钮时更换图片
        active: function(id) {
            this.activeId = id;
        },

        searchByCondition: function(type) {
            this.load = layer.load({ time: 2000 })
            axios.get('/share/project/getProjects', {
                params: {
                    publishTime: this.dateOfClassify,
                    type: this.listOfClassify1,
                    currentPage: this.currentPageIndex
                }
            }).then(res => {
                if (res.data.status == '1') {

                    this.dataSize = res.data.data.dataSize;
                    // 暂时保存resultList
                    var resultList = res.data.data.resultList;
                    // 对返回来的数据做处理 将type修改为数组
                    for (var i = 0; i < resultList.length; i++) {
                        var r1 = resultList[i];
                        if (r1.type != null) {
                            var res = r1.type.replace('[', '');
                            res = res.replace(']', '');
                            res = res.replace(' ', '');
                            res = res.split(',');
                            resultList[i].type = res;
                        }
                    }
                    // 修改完之后赋值
                    this.projMsg = resultList;
                    //请求响应回来就进行关闭
                    layer.close(this.load);
                    //如果是首页就会重新调用
                    if (this.currentPageIndex === 1) {
                        this.pageData(type);
                    }
                }
            })
        },
        // 根据时间分类去搜索
        searchByDate: function(date) {
            this.dateOfClassify = date;
            // this.currentPageIndex = 1;
            //声明加载框对象 传递type参数
            this.searchByCondition('searchByDate');
        },

        // 根据时间分类去搜索
        searchByType: function(msg) {
            this.listOfClassify1 = msg;
            // this.currentPageIndex = 1;

            //声明加载框对象
            this.searchByCondition('searchByType');
        },

        // layui 分页
        pageData: function(type) {
            //layui分页js
            layui.use('laypage', () => {
                var laypage = layui.laypage;
                //执行一个laypage实例
                laypage.render({
                    elem: 'page',
                    count: this.dataSize,
                    limit: 6,
                    curr: 1,
                    first: false,
                    last: false,
                    theme: '#FADA3C',
                    jump: (obj, first) => {
                        this.currentPageIndex = obj.curr;

                        //首次不执行和类型是关键字
                        if (!first && type === 'search') {
                            this.search();
                        }

                        //首次不执行和类型是时间加指定类型
                        if (!first && type === 'searchByDate') {
                            this.searchByDate(this.dateOfClassify);
                        }

                        //首次不执行和类型是时间加指定类型
                        if (!first && type === 'searchByType') {
                            this.searchByType(this.listOfClassify1);
                        }

                    }
                });
            });
        }

    },
    mounted: function() {

        var path = this.getUrlParam();
        // 将搜索的值赋值为地址栏传过来的值
        this.searchInfo = path.key;
        if (path.type == 'search') {
            //声明加载框对象
            this.load = layer.load({ time: 2000 })
            // 进行搜索
            this.search();
        }

    }
})